<!--客户管理-->
<template>
  <div class="app-container">

    <!--查询-->
    <el-form ref="queryForm" size="small" :model="queryParams">
      <div class="switch" :class="{ 'active': queryParams.status == 1 ? true : false }" @click="handleListing(1)">未出售
      </div>
      <div class="switch" :class="{ 'active': queryParams.status == 2 ? true : false }" @click="handleListing(2)">已出售
      </div>
    </el-form>

    <!--按钮-->
    <div class="btn-group">
      <el-row type="flex" class="rows">
        <el-col class="cols">
          <el-date-picker v-model="queryParams.tradeDate" @change="changeTime" type="daterange"
                          start-placeholder="开始日期" end-placeholder="结束日期"/>
        </el-col>

        <el-col class="cols">
          <el-select v-model="queryParams.dictCodeId" clearable placeholder="游戏品类：请选择游戏品类"
                     @change="getList(1)">
            <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode"/>
          </el-select>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.account" placeholder="游戏账号：请输入游戏账号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.saleId" placeholder="销售编号：请输入销售编号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.changePhone" placeholder="手机号：请输入手机号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>
      </el-row>
      <el-button type="primary" @click="find" plain style="background-color: #fff;color: #116BFF !important;">一键查询</el-button>
      <el-button type="primary" @click="monitorSetting">监控配置</el-button>
      <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出数据</el-button>
    </div>

    <!--表格-->
    <el-table v-loading="loading" :data="data" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="70" align="center"/>
      <el-table-column label="编号" align="center" width="60">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="游戏品类" align="center" prop="dictCodeName" min-width="120">
        <template slot-scope="scope">
          <span>{{
              scope.row.dictCodeName ? scope.row.dictCodeName : scope.row.dictCode ? scope.row.dictCode : '-'
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号描述" align="center" prop="accountDescription" min-width="200">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">{{ scope.row.accountDescription }}</div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="入库日期" align="center" prop="storageTime" min-width="160"
                       v-if="queryParams.status == 1"/>
      <el-table-column label="在库时间" align="center" prop="differenceOfDays" min-width="80"
                       v-if="queryParams.status == 1"/>
      <el-table-column label="游戏账号" align="center" prop="account" min-width="100"/>
      <el-table-column label="绑定手机" align="center" prop="phoneNumber" min-width="120"
                       v-if="queryParams.status == 1"/>
      <el-table-column label="销售日期" align="center" prop="tradeTime" min-width="100" v-if="queryParams.status == 2"/>
      <el-table-column label="销售渠道" align="center" prop="saleChannel" min-width="120"
                       v-if="queryParams.status == 2"/>
      <el-table-column label="已售时间" align="center" prop="account" min-width="200" :show-overflow-tooltip="true"
                       v-if="queryParams.status == 2"/>
      <el-table-column label="换绑手机" align="center" prop="bindingPhone" min-width="120"
                       v-if="queryParams.status == 2">
        <template slot-scope="scope">
          <span>{{
              scope.row.changePhone ? scope.row.changePhone : scope.row.bindingPhone ? scope.row.bindingPhone : '-'
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="查询状态" align="center" prop="findStatus" min-width="120"/>
      <el-table-column label="查询时间" align="center" prop="findTime" min-width="160"/>
      <el-table-column label="查询手机" align="center" prop="findPhone" min-width="120"/>
      <el-table-column label="成本金额" align="center" prop="recycleAmount" min-width="120"
                       v-if="queryParams.status == 1"/>
      <el-table-column label="账号状态" align="center" prop="accountStatus" min-width="120"/>
      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button slot="reference" size="mini" type="text" @click="handleDetail(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">查询详细</span>
          </el-button>
          <el-button slot="reference" size="mini" type="text">
            <span style="color: rgba(255, 0, 0, 1);">取消监控</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList(1)"/>

    <!-- 监控配置 -->
    <el-dialog title="监控配置" :visible.sync="settingShow" width="600px" append-to-body
               :close-on-click-modal="false">
      <el-form inline label-width="80px">
        <el-row>
          <el-checkbox-group v-model="val">
            <el-col v-for="item in 10">
              <el-checkbox>123123123</el-checkbox>
              <div class="desc">123123</div>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="settingShow = false">取 消</el-button>
        <el-button type="primary" @click="addBlack">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查询详情 -->
    <el-dialog title="查询详情" :visible.sync="detailShow" width="600px" append-to-body
               :close-on-click-modal="false">
      <el-form inline label-width="80px" ref="BlackForm">
        <el-row>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailShow = false">取 消</el-button>
        <el-button type="primary" @click="addBlack">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  customList,
  updateStatus,
  recycleAndStorage
} from "@/api/business/customer";
import {
  notation,
  listManagement,
  getManagement,
  delManagement,
  addManagement,
  updateManagement,
  unboundPhonesByCategory,
  update,
  submitOrder,
  updatePercentage, pendings
} from '@/api/business/staylnventory'


import {
  find
} from '@/api/business/automaticShelves'

export default {
  data() {
    return {
      val: '',
      recycleShow: false,
      gameList: [],//游戏品类
      loading: false,// 遮罩层
      total: 0, // 总条数
      data: [],// 表格数据
      ids: [],//查询信息
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tradeTime: '',//时间
        tradeTimeStart: '',//开始时间
        tradeTimeEnd: '',//结束时间
        status: 1,//未出售 2 已出售
        phoneNumber: '',//绑定手机号
        dictCodeId: '',//游戏品类id
        account: '',//游戏账号
        saleId: '',//销售编号
        changePhone: '',//手机号
      },
      settingShow: false,
      detailShow: false
    };
  },
  created() {
    this.getList();

    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
  },
  methods: {
    // 查询详情
    handleDetail(e) {
      this.detailShow = true;
    },

    // 监控配置
    monitorSetting() {
      this.settingShow = true;
    },

    // 增加
    addBlack() {
    },

    handleCopy(e) {
      if (e) {
        const el = document.createElement('textarea');
        el.value = e;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // 通知用户已复制
        this.$message({
          message: '复制成功！',
          type: 'success'
        });
      }
    },
    // 时间选择
    changeTime(e) {
      this.queryParams.tradeTimeStart = e[0];
      this.queryParams.tradeTimeend = e[1];
    },

    //切换上架状态
    handleListing(status) {
      this.queryParams.status = status;
      this.getList(1)
    },

    // 已添加更新操作
    handleUpdate(row) {
      this.$confirm('确认添加该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus({id: row.id, status: 7}).then(res => {
          if (res.code == 200) {
            this.$message.success('已添加操作成功！');
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        })
      }).catch(() => {
        // 用户点击了取消，不执行删除操作
      });
    },

    // 查询找回
    find() {
      if (this.ids.length === 0) {
        this.$message.error('请选择一条记录！');
      } else {
        console.log('ids:', this.ids);
        console.log('status:', this.queryParams.status);

        find({ids: this.ids, status: this.queryParams.status}).then(res => {
          if (res.code === 200) {
            this.$message.success('开始查询');
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      if (this.queryParams.status == 2) {
        customList(this.queryParams).then(res => {
          this.loading = false;
          this.data = res.rows;
          this.total = res.total;
        });
      }
      if (this.queryParams.status == 1) {
        this.queryParams.supplier = '自营'
        listManagement(this.queryParams).then(response => {
          this.data = response.rows
          this.total = response.total
          this.loading = false
        })
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1
      this.multiple = !selection.length;
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('/sales/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  /*搜索*/
  ::v-deep.el-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 20px 10px 20px;
    background: #3A84FF;
    border-radius: 16px 16px 0 0;

    .switch {
      width: 110px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-family: Source Han Sans;
      font-weight: normal;
      user-select: none;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .active {
      border-radius: 8px;
      background: #FEFEFE;
      color: #2376FE;
    }
  }

  /*button*/
  .btn-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 0 16px 16px;
    margin-bottom: 20px;

    .rows {
      width: 82%;
      flex-wrap: wrap;
    }

    .cols {
      width: 200px;
      margin: 0 10px 10px 0;

      ::v-deep .el-range-input {
        width: 80px;
        color: #0060FF;
        font-size: 12px;
      }

      ::v-deep .el-date-editor {
        width: 210px;
      }

      ::v-deep .el-input__inner {
        color: #0060FF;
        font-size: 12px;
        width: 100%;
      }
    }

    .el-button {
      height: 36px;
      background-color: #116BFF;
      margin-left: 10px;
      border: 1px solid #116bFF;
    }
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}
</style>
